<template>
    <el-card class="metric-card">
      <div class="header">
        <div class="icon" :style="{ backgroundColor: color }">
          <slot name="icon"></slot>
        </div>
        <h3>{{ title }}</h3>
      </div>
      <div class="value">{{ value }}</div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  defineProps<{
    title: string
    value: string | number
    color?: string
  }>()
  </script>
  
  <style scoped lang="scss">
  .metric-card {
    :deep(.el-card__body) {
      padding: 20px;
    }
  
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
  
      .icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: white;
      }
  
      h3 {
        margin: 0;
        font-size: 14px;
        color: #666;
      }
    }
  
    .value {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
  }
  </style>